﻿<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <!-- Basic Page Needs
================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <style type="text/css">
        .error {
            color: red;
        }

        input::-webkit-input-placeholder {
            /* WebKit browsers 适配谷歌 */
            color: #BDCADA;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 适配火狐 */
            color: #BDCADA;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ 适配火狐 */
            color: #BDCADA;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10+  适配ie*/
            color: #BDCADA;
        }
    </style>
</head>

<body>
<div class="se-pre-con"></div>
<div class="main">

    <!-- HEADER START -->
    <script src="js/head.js"></script>
    <!-- HEADER END -->

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">登录</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li>
                            <a href="index.html"><i class="fa fa-home"></i>首页</a>/
                        </li>
                        <li><span>登录</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="checkout-section ptb-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8 col-md-8 ">
                            <form class="main-form full" id="login" action="user/LoginServlet" method="post">
                                <div class="row">
                                    <div class="col-12 mb-20">
                                        <div class="heading-part heading-bg">
                                            <h2 class="heading">用户登录</h2>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="login-email">账号</label>
                                            <input id="login-email" type="text" name="username"
                                                   placeholder="用户名/手机号/邮箱">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="login-pass">密码</label>
                                            <input id="login-pass" type="password" name="userpwd">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="check-box left-side">
													<span>
                        <input type="checkbox" name="remember_me" id="remember_me" class="checkbox">
                        <label for="remember_me">记住密码</label>
                      </span>
                                        </div>
                                        <button name="submit" type="submit" class="btn-color right-side">登录</button>
                                    </div>
                                    <div class="col-12">
                                        <a title="Forgot Password" class="forgot-password mtb-20" href="#">忘记密码？</a>
                                        <hr>
                                    </div>
                                    <div class="col-12">
                                        <div class="new-account align-center mt-20"><span>没有账号？</span>
                                            <a class="link" title="Register with Shopholic"
                                               href="register.html">请注册></a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <script src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<script src="js/common.js"></script>
<script>
    $().ready(function () {
        // 在键盘按下并释放及提交后验证提交表单
        $("#login").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                userpwd: {
                    required: true,
                    minlength: 5
                },
            },
            messages: {
                username: {
                    required: "账号不能为空",
                    minlength: "账号不能小于两个字母或者数字"
                },
                userpwd: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },
            },
        });
    });
</script>
</body>

</html>